<script type="text/x-template" id="me-article-select">
    <div class="layui-form-item">
        <label class="layui-form-label">已选文章</label>
        <div class="layui-input-block">
            <me-scroll ref="meScroll" :height="((arcList.length > 6 ? 6 : arcList.length) * 41 + 4 + addHeight) + 'px'" :list="arcList" @change="arcList = $event"></me-scroll>
            <lay-button-group style="display: flex;">
                <lay-button size="sm" fluid="true" style="flex: 2;" @click="showLayer">添加文章</lay-button>
                <lay-button size="sm" fluid="true" style="flex: 1;" @click="addHeight = addHeight + 41">加高</lay-button>
                <lay-button size="sm" fluid="true" style="flex: 1;" @click="addHeight = addHeight - 41">减低</lay-button>
            </lay-button-group>
        </div>
    </div>
    <lay-layer title="选择文章" :area="['360px','455px']" maxmin="true" v-model="layerShow" move="true" :type="2" content="{{url('article/index')}}" :shadeClose="false" @close="closeLayer"></lay-layer>
</script>
<script>
    components['me-article-select'] = defineComponent({
        template: '#me-article-select',
        props: {
            list: {
                type: Array,
                default: []
            }
        },
        setup(props, ctx) {
            const addHeight = ref(0);
            const arcList = ref(props.list);

            const change = data => {
                data && (arcList.value = data);
                emitModel();
            }

            const emitModel = () => {
                ctx.emit('update:list', arcList.value);
                const ids = arcList.value.map(item => item.id);
                ctx.emit('update:modelValue', ids.join(','));
            }

            const layerShow = ref(false);
            const showLayer = () => {
                layerShow.value = true;
                window.callback = (data) => {
                    arcList.value.push(data);
                    emitModel();
                    nextTick(() => {
                        scrollToBottom();
                    });
                }
            }
            const closeLayer = () => {
                window.callback = null;
            }

            let meScroll = null;
            onMounted(() => {
                console.log('articleSelect mounted');
                meScroll = getCurrentInstance();
            });
            function scrollToBottom() {
                meScroll.ctx.$refs.meScroll.scrollToBottom();
            }

            return {
                addHeight,
                arcList,
                layerShow,
                showLayer,
                closeLayer
            }
        },
        inheritAttrs: false
    });
</script>